<template>
  <view class="chart-container">
    <canvas
      canvas-id="bloodPressureCanvas"
      :style="{ width: width + 'px', height: height + 'px' }"
    ></canvas>
  </view>
</template>

<script>
export default {
  name: "BloodPressureChart",
  props: {
    width: { type: Number, default: 340 },
    height: { type: Number, default: 240 },
    sbp: { // 收缩压
      type: Array,
      default: () => [120, 130, 128, 135, 140, 125, 132]
    },
    dbp: { // 舒张压
      type: Array,
      default: () => [80, 85, 82, 88, 90, 78, 84]
    },
    xLabels: {
      type: Array,
      default: () => ["一", "二", "三", "四", "五", "六", "日"]
    }
  },
  mounted() {
    this.draw();
  },
  watch: {
    sbp() { this.draw(); },
    dbp() { this.draw(); }
  },
  methods: {
    draw() {
      const ctx = uni.createCanvasContext("bloodPressureCanvas", this);
      const { width, height, sbp, dbp, xLabels } = this;

      const padding = 40;
      const contentW = width - padding * 2;
      const contentH = height - padding * 2;
      const xStep = contentW / (sbp.length - 1);

      const max = Math.max(...sbp, ...dbp, 180);
      const min = Math.min(...sbp, ...dbp, 60);

      const dashLength = 5;
      const gapLength = 3;

      // ===== 背景横向辅助线（虚线） =====
      ctx.setFontSize(10);
      ctx.setFillStyle("#888");
      const yStep = (max - min) / 5;
      for (let i = 0; i <= 5; i++) {
        const val = (min + yStep * i).toFixed(0);
        const y = height - padding - (contentH / 5) * i;

        ctx.setStrokeStyle("#eee");
        ctx.setLineWidth(1);
        ctx.beginPath();
        for (let x = padding; x < width - padding; x += dashLength + gapLength) {
          ctx.moveTo(x, y);
          ctx.lineTo(x + dashLength, y);
        }
        ctx.stroke();

        ctx.fillText(val, 5, y + 3);
      }

      // ===== X轴虚线 =====
      const xAxisY = height - padding;
      ctx.setStrokeStyle("#ccc");
      ctx.setLineWidth(1);
      ctx.beginPath();
      for (let x = padding; x < width - padding; x += dashLength + gapLength) {
        ctx.moveTo(x, xAxisY);
        ctx.lineTo(x + dashLength, xAxisY);
      }
      ctx.stroke();

      // ===== X轴标签 =====
      xLabels.forEach((label, i) => {
        const x = padding + i * xStep;
        ctx.setFillStyle("#666");
        ctx.setFontSize(10);
        ctx.setTextAlign("center");
        ctx.fillText(label, x, height - padding + 15);
      });

      // ===== 坐标点计算 =====
      const calcPoints = (arr) => arr.map((val, i) => ({
        x: padding + i * xStep,
        y: height - padding - ((val - min) / (max - min)) * contentH,
        val
      }));
      const pointsSBP = calcPoints(sbp);
      const pointsDBP = calcPoints(dbp);

      const smoothFactor = 0.25;

      // ===== 绘制曲线函数 =====
      const drawLine = (points, colorFunc) => {
        ctx.setLineWidth(2);
        for (let i = 0; i < points.length - 1; i++) {
          const p0 = points[i - 1] || points[i];
          const p1 = points[i];
          const p2 = points[i + 1];
          const p3 = points[i + 2] || points[i + 1];

          const cp1x = p1.x + (p2.x - p0.x) * smoothFactor;
          const cp1y = p1.y + (p2.y - p0.y) * smoothFactor;
          const cp2x = p2.x - (p3.x - p1.x) * smoothFactor;
          const cp2y = p2.y - (p3.y - p1.y) * smoothFactor;

          const color = colorFunc(p2.val);
          const grad = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
          grad.addColorStop(0, color);
          grad.addColorStop(1, color);

          ctx.beginPath();
          ctx.moveTo(p1.x, p1.y);
          ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
          ctx.setStrokeStyle(grad);
          ctx.stroke();
        }

        // 节点和数值
        points.forEach(p => {
          const color = colorFunc(p.val);

          // 外圆
          ctx.beginPath();
          ctx.arc(p.x, p.y, 4, 0, 2 * Math.PI);
          ctx.setFillStyle(color);
          ctx.fill();

          // 内圆
          ctx.beginPath();
          ctx.arc(p.x, p.y, 1.8, 0, 2 * Math.PI);
          ctx.setFillStyle("#fff");
          ctx.fill();

          // 数值
          ctx.setFillStyle("#333");
          ctx.setFontSize(10);
          ctx.setTextAlign("center");
          ctx.fillText(p.val.toFixed(0), p.x, p.y - 10);
        });
      };

      // ===== 颜色规则 =====
      const sbpColor = val => {
        if (val < 90) return "#FDC24E";
        else if (val <= 140) return "#1EC157";
        else return "#F56202";
      };
      const dbpColor = val => {
        if (val < 60) return "#FDC24E";
        else if (val <= 90) return "#1EC157";
        else return "#F56202";
      };

      // 绘制两条曲线
      drawLine(pointsSBP, sbpColor);
      drawLine(pointsDBP, dbpColor);

      ctx.draw();
    }
  }
};
</script>

<style scoped>
canvas {
  display: block;
}
.chart-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
